<template>
    <div class="addMerchantBox" v-loading="loading">
        <el-button
                class="el-icon-arrow-left"
                size="mini"
                type="primary"
                style="margin-bottom:10px;"
                @click="handBackList"
        >返回
        </el-button>
        <el-form ref="form" :model="initial_data">
            <el-form-item label="角色名字">
                <el-input v-model="initial_data.name" style="width:300px" placeholder="请输入角色名字"></el-input>
            </el-form-item>

            <el-form-item label="权限">
                <el-tree
                        :default-expanded-keys="initial_data.permission"
                        :default-checked-keys="initial_data.permission"
                        :data="permissionsList"
                        ref="tree"
                        show-checkbox
                        :check-strictly="true"
                        node-key="id"
                        @check-change="orgCheckChange"
                >
                </el-tree>
            </el-form-item>
        </el-form>

        <div class="submitBtnBox">
            <el-button class="submitBtn" @click="submitFn" type="primary" size="mini">确认修改</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "permission-addUser",
        components: {},
        data() {
            return {
                initial_data: {
                    //获取初始数据
                    token: localStorage.getItem("user_token"), //token
                    name: "",
                    permission: []
                },
                permissionsList: [],
                loading: false,
            };
        },
        watch: {},
        methods: {
            defaultFn() {
                this.loading = true;
                this.$http
                    .get("/web/user/roles/permissions", {
                        params: {
                            token: localStorage.getItem("user_token"),
                            id: [this.$route.query.id]
                        }
                    })
                    .then(response => {
                        if (response.data.status === "success") {
                            for (let i = 0; i < response.data.data.length; i++) {
                                this.initial_data.permission.push(response.data.data[i].id)

                            }
                            this.initial_data.token = localStorage.getItem("user_token");
                            this.initial_data.name = this.$route.query.name;
                            this.loading = false;
                            console.log(this.initial_data)
                        }
                    })
                    .catch(error => {
                        console.log("error:", error);
                    });
            },
            //获取下拉权限节点
            getPermissions() {
                this.$http
                    .get("/web/user/permissions/list/tree", {
                        params: {
                            token: localStorage.getItem("user_token"),
                            pageSize: 999
                        }
                    })
                    .then(response => {
                        if (response.data.status == "success") {
                            this.permissionsList = response.data.data;
                        }
                    })
                    .catch(error => {
                        console.log("error:", error);
                    });
            },

            handBackList() {
                this.$router.push({name: "permissionRoles"});
            },
            orgCheckChange(data, checked, indeterminate) {
                console.log(data, '数据')
                console.log(checked, '选中状态')
                console.log(indeterminate, '子树中选中状态')
            },

            submitFn() {
                console.log(this.initial_data);
                return;
                this.initial_data.id = this.$route.query.id;
                this.$nextTick(() => {
                    this.$http
                        .post("/web/user/roles/update", this.initial_data)
                        .then(response => {
                            if (response.data.status == "success") {
                                this.$message({
                                    message: "修改成功",
                                    duration: 6000
                                });

                                this.$router.push({
                                    name: "permissionRoles"
                                });
                            } else {
                                this.$message({
                                    message: "修改失败，原因：" + response.data.failedMsg,
                                    duration: 6000
                                });
                            }
                            this.loading = false;
                        })
                        .catch(error => {
                            this.$message({
                                message: "修改失败，原因：" + error,
                                duration: 6000
                            });
                            this.loading = false;
                        });
                });
            }
        },
        mounted() {
            this.defaultFn();
            this.getPermissions();
        }
    };
</script>

<style scoped lang="scss">
    @import "./roles.scss";
</style>
